<template>
  <div style="display: flex; justify-content: space-between;">
    <!-- 评分维度 -->
    <div class="analysis-card two-column">
      <h3 class="analysis-title score-title">评分维度</h3>
      <div class="metrics-list">
        <div class="metric-item">
          <span class="item-label">装修</span>
          <div class="item-value">
            <span class="amount">{{ getData('采集经营评分') }}</span>
            <span class="score-total">/{{ getData('采集经营评分') }}</span>
          </div>
        </div>

        <div class="metric-item">
          <span class="item-label">商品</span>
          <div class="item-value">
            <span class="amount">{{ getData('采集经营评分') }}</span>
            <span class="score-total">/{{ getData('采集经营评分') }}</span>
          </div>
        </div>

        <div class="metric-item">
          <span class="item-label">内容</span>
          <div class="item-value">
            <span class="amount">{{ getData('采集经营评分') }}</span>
            <span class="score-total">/{{ getData('采集经营评分') }}</span>
          </div>
        </div>

        <div class="metric-item">
          <span class="item-label">体验</span>
          <div class="item-value">
            <span class="amount">{{ getData('采集经营评分') }}</span>
            <span class="score-total">/{{ getData('采集经营评分') }}</span>
          </div>
        </div>

        <div class="metric-item">
          <span class="item-label">评分</span>
          <div class="item-value">
            <span class="amount">{{ getData('经营分') }}</span>
            <span class="score-total">/{{ 15 }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 运营建议 -->
    <div class="analysis-card two-column">
      <h3 class="analysis-title score-title">运营建议</h3>
      <div class="suggestion-content">
        {{ getData('采集经营评分', '运营建议') || '暂无建议' }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ReportSection } from '@/types/report'

interface Props {
  sectionData: ReportSection
}

const props = defineProps<Props>()

const getData = (key: string): string => {
  const item = props.sectionData.items.find(item => item.name === key)
  return item?.value ?? '-'
}
</script>

<style scoped>
.analysis-card {
  margin-bottom: 20px;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.two-column {
  flex: 1;
  margin: 0 10px;
}

.score-title {
  font-size: 18px;
  color: #2d3748;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
}

.metrics-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.metric-item {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: #f8fafc;
  border-radius: 8px;
}

.item-label {
  font-size: 13px;
  color: #4a5568;
  margin-bottom: 4px;
}

.item-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.amount {
  font-size: 20px;
  font-weight: 600;
  color: #2d3748;
}

.score-total {
  font-size: 14px;
  color: #718096;
}

.suggestion-content {
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  color: #4a5568;
  line-height: 1.6;
  min-height: 200px;
  /* 给建议内容一个最小高度 */
}

@media (max-width: 768px) {
  .metrics-list {
    grid-template-columns: 1fr;
  }
}
</style>